<script setup lang="ts">
import { ConfigStore } from '@src/store/config.store'
const configStore = ConfigStore()
const color = ref('#FFFFFF')
function toggleExpand() {
  configStore.toggleExpand()
}
function resize(e?: Event) {
  let w: number = 0
  if (e) {
    let { innerWidth } = e.target as Window
    w = innerWidth
  } else {
    w = window.innerWidth
  }
  if (w < 800) {
    configStore.setExpand(true)
  } else if (w > 1000) {
    configStore.setExpand(false)
  }
}
function colorChange(e: string | null) {
  console.log(e)
}
function activeChange(e: string | null) {
  console.log(e)
}
onMounted(() => {
  resize()
  window.addEventListener('resize', resize)
})
</script>
<template>
  <div class="header-wrapper container-flex flex-bf">
    <div class="close" @click="toggleExpand">
      <iEpFold v-if="!configStore.expand"></iEpFold>
      <iEpExpand v-else></iEpExpand>
    </div>
    <div class="operate-wrapper container-flex flex-items-center">
      <div class="color-raycaster" v-if="false">
        <ElColorPicker v-model="color" show-alpha @change="colorChange" @active-change="activeChange" />
      </div>
      <div class="user-msg">
        <ElDropdown trigger="click">
          <ElBadge :value="12">
            <IEpChatDotRound></IEpChatDotRound>
          </ElBadge>
          <template #dropdown>
            <ElDropdownMenu>
              <ElDropdownItem>Github</ElDropdownItem>
              <ElDropdownItem>CSDN</ElDropdownItem>
            </ElDropdownMenu>
          </template>
        </ElDropdown>
      </div>
      <div class="user-info">
        <ElDropdown trigger="click">
          <div class="dropdown-wrapper">
            <ElAvatar :size="30"></ElAvatar>
            <el-icon class="dropdown-arrow">
              <arrow-down />
            </el-icon>
          </div>
          <template #dropdown>
            <ElDropdownMenu>
              <ElDropdownItem>修改信息</ElDropdownItem>
              <ElDropdownItem>退出</ElDropdownItem>
            </ElDropdownMenu>
          </template>
        </ElDropdown>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.header-wrapper {
  padding: 0 20px;
  height: 100%;
  .close {
    cursor: pointer;
  }
  .operate-wrapper {
    svg {
      font-size: 24px;
    }
    .color-raycaster {
    }
    .color-raycaster,
    .user-msg {
      margin-right: 20px;
     
    }
    .dropdown-wrapper {
      display: flex;
      align-items: center;
      .dropdown-arrow {
        margin-left: 5px;
      }
    }
  }
}
</style>
